<template>
  <div>
    <a-modal
      :visible="previewVisible"
      :footer="null"
      @cancel="handleCancel"
      class="pic_model_outside"
      :width="800"
      :bodyStyle="{'text-align':'center'}"
    >
      <div class="picModel">
        <a-icon
          type="left"
          @click="previewLeft"
          style="position:absolute;top:50%;left:0;font-size:30px;"
        />
        <div class="picModelDiv" style="text-align:center;width:638px;">
          <img alt="example" :src="previewImage" />
        </div>
        <a-icon
          type="right"
          @click="previewRight"
          style="position:absolute;top:50%;right:0;font-size:30px;"
        />
      </div>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: 'previewImage',
  data() {
    return {
      previewVisible: false,
      previewImage: null,
      imgArr: [],
      imgIndex: null
    }
  },
  methods: {
    handleCancel() {
      this.previewVisible = false
      this.previewImage = null
      this.imgArr = []
      this.imgIndex = null
    },
    showImg(data, index) {
      this.imgArr = data
      this.imgIndex = index
      if (data) {
        this.previewImage = data[index].content
        this.previewVisible = true
      }
    },
    previewLeft() {
      this.imgIndex--
      if (this.imgIndex >= 0) {
        if (this.imgArr[this.imgIndex].type == 'picture') {
          this.previewImage = this.imgArr[this.imgIndex].content
          this.$forceUpdate()
        } else if (this.imgArr[this.imgIndex].type == 'video' || this.imgArr[this.imgIndex].type == 'text') {
          this.previewLeft()
        }
      } else {
        this.$message.warning('已经是第一张图片了~')
      }
    },
    previewRight() {
      this.imgIndex++
      if (this.imgIndex < this.imgArr.length) {
        if (this.imgArr[this.imgIndex].type == 'picture') {
          this.previewImage = this.imgArr[this.imgIndex].content
          this.$forceUpdate()
        } else if (this.imgArr[this.imgIndex].type == 'video' || this.imgArr[this.imgIndex].type == 'text') {
          this.previewRight()
        }
      } else {
        this.$message.warning('已经是最后一张图片了~')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.picModel {
  display: flex;
  justify-content: space-between;
  padding: 20px 80px;
  position: relative;
  .picModelDiv {
    width: 638px;
    overflow: hidden;
    img {
      height: auto;
      width: auto;
      max-width: 100%;
      max-height: 700px;
      object-fit: contain;
    }
  }
}
</style>